<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta name="referrer" content="no-referrer"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理</title>
    <link href="../static/images/favicon.ico" th:href="@{/images/favicon.ico}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"  />
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../static/css/element-ui-index.css" th:href="@{/css/element-ui-index.css}">

</head>
<body class="admin-body">

<div id="app">
    <!--顶部栏-->
    <div class="container-fluid p-1 bg-dark text-white text-center">
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="/admin">添加博客</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin/manageBlog">管理博客</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin/sys-configs">配置信息管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/admin/tags">标签管理</a>
            </li>
        </ul>
    </div>


    <!--列表-->
    <div class="container mt-5">
        <div class="card">
            <div class="card-body">
                <!-- 添加按钮 -->
                <el-button class="mb-3" type="primary" plain  @click="clickAdd">添加标签</el-button>

                <el-table
                        :data="list"
                        stripe
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="ID"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="name"
                            label="标签名">
                    </el-table-column>

                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>

                    <el-table-column
                            prop="updateTime"
                            label="更新时间">
                    </el-table-column>

                    <el-table-column width="150" label="操作" >
                        <template slot-scope="scope">
                            <el-button  size="mini" @click="clickEdit(scope.row.id)">编辑</el-button>
                            <el-button  size="mini" type="danger" @click="clickDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <!-- 分页 -->
                <el-pagination
                        class="mt-5"
                        @current-change="handleCurrentChange"
                        :current-page="searchForm.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="searchForm.pageSize"
                        :total="total"
                ></el-pagination>
            </div>
        </div>

    </div>


    <!-- 创建或编辑的表单 -->
    <el-dialog title="添加/编辑标签" :visible="dialogVisible" @close="dialogVisible = false" :close-on-click-modal="false">
        <!-- 表单内容 -->
        <el-form :model="editForm" label-width="150px">
            <!-- ID -->
            <el-form-item label="ID">
                <el-input v-model="editForm.id" disabled></el-input>
            </el-form-item>

            <!-- 标签名 -->
            <el-form-item label="标签名" prop="name">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>

        </el-form>
        <!-- 按钮操作 -->
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clickSave">保存</el-button>
      </span>

    </el-dialog>

</div>
</body>

<script src="../../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<!-- import Vue before Element -->
<script src="../../static/lib/vue.js"                   th:src="@{/lib/vue.js}"></script>
<!-- import JavaScript -->
<script src="../../static/lib/element-ui-index.js"      th:src="@{/lib/element-ui-index.js}"></script>
<script src="../../static/lib/axios.min.js"             th:src="@{/lib/axios.min.js}"></script>
<script src="../../static/lib/axiosInstance.js"         th:src="@{/lib/axiosInstance.js}"></script>

<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                list: [],
                total: 0, // 总记录数
                searchForm: {
                    pageNum: 1, // 当前页
                    pageSize: 10  // 每页显示条数
                },
                // 表单显示
                dialogVisible: false,
                formLabelWidth: '120px',
                editForm:{

                },

            }

        },
        methods:{
            //获取分页数据
            fetchPage(){
                axiosInstance.get(`/admin/tags/page`,{
                    params: this.searchForm
                }).then(res => {
                    if (res.code === 20000){
                        this.list = res.data.page.list;
                        this.total = res.data.page.total;
                    }

                })
            },
            // 分页切换
            handleCurrentChange(currentPage) {
                this.searchForm.pageNum = currentPage;
                this.fetchPage();
            },
            clickAdd(){
                this.editForm = {}
                this.dialogVisible = true
            },
            clickSave(){
                if (this.editForm.id) {
                    // 有ID更新
                    axiosInstance.put(`/admin/tags`, this.editForm)
                        .then(resp => {
                            if(resp.code === 20000){
                                this.$message.success('更新成功');
                                this.dialogVisible = false;
                                this.fetchPage();
                            }

                        })
                        .catch(error => {
                            console.error(error);
                        });
                } else {
                    // 无ID创建
                    axiosInstance.post('/admin/tags', this.editForm)
                        .then(resp => {
                            if(resp.code === 20000){
                                this.$message.success('创建成功');
                                this.dialogVisible = false;
                                this.fetchPage();
                            }
                        })
                        .catch(error => {
                            console.error(error);
                        });
                }
            },
            // 编辑
            clickEdit(id) {
                axiosInstance.get(`/admin/tags/${id}`)
                    .then(resp => {
                        this.editForm = resp.data.tag
                    })

                this.dialogVisible = true;
            },
            //点击删除
            clickDelete(id){
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    this.delete(id)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            // 删除
            delete(id) {
                axiosInstance.delete(`/admin/tags/${id}`)
                    .then(() => {
                        this.fetchPage();
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            logout(){
                axiosInstance.get('/admin/logout').then(res => {
                    if (res.code === 20000){
                        location.href = "/admin";
                    }
                })
            }

        },

        mounted(){
            this.fetchPage()
        }
    })



</script>

</html>
